<template>
  <biz-form-remote-select
    :class="{'form-remote-select': disabled}"
    ref="product"
    :field="field"
    v-model="taskValue"
    value-key="taskId"
    :remote-method="remoteMethod"
    :isTaskCardMultiple="isTaskCardMultiple"
    @input="updateTask"
    :placeholder="placeholder || $t('common.placeholder.selectSomething', {0:$t('common.base.task')})"
    :multiple="multiple"
    :selectWidth="100"
    selectMode
    :selectOptions="selectOptions"
  >
    <div class="related-task-option" slot="option" slot-scope="{ option }">
      <h3>{{ option.taskNo}}  <span v-if="option.templateName">({{ option.templateName }})</span></h3>
      <div class="related-task-option-desc">
        <p>
          {{$t('common.form.preview.relateTask.label1')}}
          <span>{{option.customerName}}</span>
        </p>
        <p>
          {{$t('common.form.preview.relateTask.label2')}}
          <span>{{option.linkMan && option.linkMan.name}}</span>
        </p>
        <p>
          {{$t('common.form.preview.relateTask.label3')}}
          <span>{{option.linkMan && option.linkMan.phone}}</span>
        </p>
      </div>
      <p v-if="option.products && option.products.length > 0">
        {{$t('common.form.preview.relateTask.label4')}}
        <span v-for="(product, idx) in option.products" :key="idx">
          {{option.products[idx].name}}
          <span v-if='idx <option.products.length - 1'>,</span>
        </span>
      </p>
    </div>
  </biz-form-remote-select>
</template>

<script>
/** api */
import { search } from '@src/api/TaskApi.ts';

/** mixin */
import FormMixin from '@src/component/form/mixin/form';

import _ from 'lodash';

export default {
  name: 'form-related-task',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      taskValue: [],

      page: 1,
      pageSize: 20,
      isMultiple: true,
      selectOptions:[
        {
          label:this.$t('common.base.fuzzySearch'),
          value: 1
        },
        {
          label:this.$t('common.form.type.taskNo'),
          value: 2
        }
      ]
    };
  },
  computed: {
    cardInputType() {
      return this.formBuilderComponent?.cardInputType || '';
    },
    // 关联工单附加组件单次并且开启显示字段时为单选，其他情况为多选
    multiple() {
      const mode = this.formBuilderComponent?.mode;
      const isShowSystemFields = this.field?.setting?.isShowSystemFields;

      if ( mode === 'task_card' && isShowSystemFields ) {
        return this.cardInputType !== 'single';
      }
      return true;
    },
    // 是否是关联工单附加组件单次并且开启显示字段
    isTaskCardMultiple() {
      return this.multiple == false;
    }
  },
  watch: {
    value(val) {
      this.init(val);
    }
  },
	mounted() {
    // this.value = {}
    this.init(this.value);
  },
  methods: {
    init(val) {
      if(val && val.length > 0) {
        let taskValue = _.cloneDeep(val);
        this.taskValue = taskValue.map(item => {
          item.label = item.taskNo;
          return item;
        });
      }
    },
    remoteMethod(params) {
      let {keyword, pageNum, pageSize, selectValue} = params;
      params = {
        page: pageNum,
        pageSize,
        keyword
      };
      if (selectValue == 2) {
        params.taskNo = keyword;
        delete params.keyword;
      }

      return search(params)
        .then((res) => {
          if (!res || !res.result || !res.result.content) return;
          res.list = res.result.content.map((task) =>
            Object.freeze({
              label: task.taskNo,
              taskNo: task.taskNo,
              taskId: task.id,
              templateId: task.templateId,
              templateName: task.templateName,
              customerName: task.customerEntity && (task.customerEntity.name || ''),
              linkMan: task.linkMan || {},
              products: task.products || [],
            })
          );

          res.total = res.result.totalElements;
          res.totalPages = res.result.totalPages;
          res.hasNextPage = !!(res.totalPages > params.page);
          res.pageNum = params.page;

          return res;
        })
        .catch((e) => console.error(e))
    },
    updateTask(newValue) {
      this.inputForValue(
        newValue.map((item) => {
          return {
            taskId: item.taskId,
            taskNo: item.taskNo,
            templateId: item.templateId,
          };
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.form-remote-select {
  ::v-deep .base-select-main-content{
    background-color: #F5F5F5 !important;
    border-color: #D9D9D9 !important;
  }
}
.related-task-option{
  font-size: 12px;
  line-height: 14px;
  padding-top: 20px;
  h3 {
    font-size: 14px;
    span {
      margin-left: 4px
    }
  }
  p {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  &-desc {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    p{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:last-child{
        min-width: 120px;
      }
    }
  }
}
</style>
